<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 单向数据绑定 -->
        <input type="text" v-bind:value="name">
        <input type="text" :value="name">
        <hr>
        <!-- 双向数据绑定 -->
        <input type="text" v-model:value="name">
        <input type="text" v-model="name">
        <input type="text" v-model="password">


    </div>
    
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
         name:'张三',
         password:''
        }
    })
</script>

<!-- 
数据绑定：
Vue中有两种数据绑定方式：
a>单向数据绑定 v-bind 数据只能从data流向页面
b>双向数据绑定 v-model 数据不仅能从data流向页面还可以从也卖弄流向data
备注：双向数据板顶用于vue收集表单中的数据   
v-model:value可以简写为v-model 因为v-model默认收集的就是value值

 -->